<template>
	<view class="main">
		<view class="top">
			<image :src="datas.bookImg" mode=""></image>
			<h3>{{datas.bookName}}</h3>
			<p>{{datas.bookAuthor}}</p>
		</view>
		<view class="middle">
			<view class="">
				<h5>简介</h5>
			</view>
			<p>{{datas.bookIntro}}</p>
			<view class="pinglun">
				<h5>热门书评&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span @tap="write">写评论</span></h5>
				<view class="zzz">
					<view v-for="(value,index) in pinglun" class="mmm">
					<image :src="value.commentUserAvatar" mode="" class="www" ></image>
					<p>{{value.commentUserName}}</p>
					<p>{{value.comment}}</p>
				</view>
				</view>
				
			</view>
		</view>
		<view class="bottom">
			<view class="" @tap="add">
				加入书架
			</view>
			<view class="" @tap="read">
				立即阅读
			</view>
		</view>
	</view>
</template>

<script>
	import http from '/pages/utils/request.js'
	export default {
		data() {
			return {
				bookId: 0,
				datas:{},
				pinglun:[],
				addBookshelfDTO:{
					userId:0,
					bookId:0
				}
			}
		},
		onLoad(option) {
			this.bookId=option.id
			console.log(this.bookId);
			const parmas = {
				bookId:this.bookId
			}
			http.get("/book/bookinfo",{params:parmas}).then(res => {
				this.datas=res.data
				console.log(this.datas)
			}).catch(err => {
				console.log(err)
			})
			
			http.get("/book/bookcomment",{params:parmas}).then(res => {
				console.log("11111111111")
				this.pinglun=res.data
				console.log(res)
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			add(){
				let userId=+localStorage.getItem('id');
				this.addBookshelfDTO.userId=userId;
				this.addBookshelfDTO.bookId=+this.bookId;
				console.log(this.addBookshelfDTO)
				http.post("/user/addBookshelf",this.addBookshelfDTO,{headers:{"Content-Type":"application/json"}}).then(res => {
					alert('加入成功')
					console.log(res.data);
				})
				// console.log(userId)
				// console.log(this.bookId)
				
			},
			read(){
				uni.navigateTo({
					url:'/pages/readbook/readbook?bookid='+this.bookId
				})
			},
			write(){
				uni.navigateTo({
					url:'/pages/xiepinglun/xiepinglun?bookid='+this.bookId
				})
			}
		}
	}
	
</script>

<style>
	span{
		color: pink;
	}
	.zzz{
		overflow-y: auto;
		height: 300rpx;
	}
	.mmm{
		display: flex;
		align-items: center;
		
	}
	.mmm p{
		/* line-height: 10rpx; */
		/* text-align: left; */
		text-indent: 0em !important;
		width: 120rpx;
		height: 40rpx;
		margin-top: 80rpx !important;
		margin-left: 5rpx !important;
		
		
	}
	.www {
		width: 50rpx !important;
		height: 50rpx !important;
	}
	.bottom view{
		margin-top: 40rpx;
		border: 1rpx whitesmoke solid;
		padding: 10rpx;
	}
	.bottom{
		display: flex;
		justify-content: space-around;
	}
	.pinglun{
		border: 1rpx whitesmoke solid;
		height: 390rpx;
	}
	.middle p{
		font-size: 26rpx;
		color: gray;
		text-indent: 2em;
		margin: 0 30rpx;
	}
	.middle h5{
		margin-left: 30rpx;
		margin-top: 20rpx;
	}
	.middle{
		border-top: 1rpx whitesmoke solid ;
		
	}
	.main{
		height: 1260rpx;
		background-image: url('https://www.mx-fm.com/UpFile/201807/2018073141337097.jpg');
		background-size: 750rpx 1260rpx;
	}
	.main image{
		width: 220rpx;
		height: 300rpx;
		border-radius: 10rpx;
		margin-top: 60rpx;
	}
	.main .top{
		text-align: center;
	}
	.main .top p{
		font-size: 26rpx;
		color: gray;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
